 /*
 * @description: 售后维权表格
 * @Author: along
 * @Date: 2020-10-23
 * @Last Modified by: along
 * @Last Modified time: 2020-10-28
 */
<template>
    <div class="tableProtection">
        <!-- 无数据  -->
        <div
            class="tableWrap"
            v-if="table.length == 0"
        >
            暂无数据
        </div>

        <!-- 数据列表 -->
        <div
            v-else
            class="orderSelfList"
        >
            <div class="order_header">
                <div class="order_nav">
                    <div
                        v-for="(title,index) in tableHeader"
                        :key="index"
                        class="order_title"
                        :class="'header'+ index"
                        :style="{
                            width: index == 0 ? '372px' : 'auto', flex: index == 0? 'none' : '1', paddingLeft: '0px', paddingRight: '0px', textAlign: 'center'
                        }"
                    >
                        {{ title }}
                    </div>
                </div>
            </div>
            <div class="order_self">
                <div class="order_wrap">
                    <div
                        v-for="(row,index) in table"
                        :key="index"
                        class="order_list"
                        :style="{width: maxWidth ? '1041px': 'auto'}"
                    >
                        <!-- 订单信息 -->
                        <div class="order_data">
                            <div class="order_info">
                                <p class="order_no">
                                    订单编号: {{ row.order_no ? row.order_no : '--' }}
                                </p>
                                <p class="order_time">
                                    下单时间: {{ row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                                </p>
                            </div>
                            <div class="nav-right">
                                <div
                                    class="order_detail"
                                    @click="checkDetail(row)"
                                >
                                    查看详情
                                </div>
                            </div>
                        </div>

                        <!-- 商品数据列表 -->
                        <div class="order_content orderHeight">
                            <div
                                class="order_side"
                                data-info="商品信息"
                                :style="{width: '372px', flex: 'none', alignItems: 'flex-start'}"
                            >
                                <div
                                    v-for="(item, key) in row.order_item_list"
                                    :key="key"
                                    class="order_side_info"
                                >
                                    <img
                                        :src="item.goods_info.thumb_pic"
                                        class="order_cover"
                                        @click="fnShowPreview(item.goods_info.thumb_pic)"
                                    >
                                    <div class="order_product">
                                        <p
                                            v-if="item.goods_info.title"
                                            class="order_title"
                                        >
                                            {{ item.goods_info.title }}
                                        </p>
                                        <p
                                            v-if="item.goods_product_info.goods_specs.length > 0"
                                            class="order_spec"
                                        >
                                            {{ item.goods_product_info.goods_specs | filterSpec }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="order_side no-padding"
                                data-info="申请时间"
                                :style="{height: row.order_item_list.length * 132 + 'px'}"
                            >
                                <div class="order_side_info">
                                    {{ row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                                </div>
                            </div>
                            <div
                                class="order_side no-padding"
                                data-info="退款金额"
                                :style="{height: row.order_item_list.length * 132 + 'px'}"
                            >
                                <div class="order_side_info">
                                    {{ row.refund_money ? '¥' + row.refund_money : '--' }}
                                </div>
                            </div>
                            <div
                                class="order_side"
                                data-info="售后类型"
                                :style="{height: row.order_item_list.length * 132 + 'px'}"
                            >
                                <div class="order_side_info">
                                    {{ row.type == 1 ? '仅退款' : (row.type == 2 ? '退货退款' : '换货') }}
                                </div>
                            </div>
                            <div
                                class="order_side"
                                data-info="售后原因"
                                :style="{height: row.order_item_list.length * 132 + 'px'}"
                            >
                                <div
                                    class="order_side_info"
                                    :style="{width: '80%', textAlign: 'center', lineHeight: '22px'}"
                                >
                                    {{ row.reason ? row.reason : '--' }}
                                </div>
                            </div>
                            <div
                                class="order_side order_side_info_fatch order_side_bottom"
                                data-info="用户信息"
                                :style="{
                                    height: row.order_item_list.length * 132 + 'px', justifyContent: 'center'
                                }"
                            >
                                <p class="order_side_name">
                                    {{ row.student_true_name ? row.student_true_name : '--' }}
                                </p>
                                <p class="order_side_phone">
                                    {{ row.student_phone ? row.student_phone : '--' }}
                                </p>
                            </div>
                            <div
                                class="order_side"
                                data-info="售后状态"
                                :style="{height: row.order_item_list.length * 132 + 'px', justifyContent: 'center'}"
                            >
                                <div class="order_cloum">
                                    <p :style="{color: row.status == 1 ? '#FF3030' : '#333333', fontSize: '14px', fontWeight: '400'}">
                                        {{ row.status | filterRefund }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';

export default {
    name: 'TableProtection',
    props: {
        table: {
            type: Array,
            default: () => {}
        }
    },
    components: { imgPreview },
    data () {
        return {
            apply_no: '',//唯一商品退款编号
            maxWidth: false,
            tableHeader: ['商品信息','申请时间','退款金额','售后类型','售后原因','用户信息','售后状态'],
            type: ''
        };
    },
    watch: {},
    filters: {
        filterSpec (val) {
            let str = '';

            val.forEach(element => {
                str += element.spec_name + ';' + element.spec_value + ';';
            });

            return str;
        },
        filterRefund (val) {
            switch (val) {
                case 0:
                    return '未申请';
                case 1:
                    return '售后待处理';
                case 2:
                    return '售后完成';
                case 3:
                    return '售后关闭';
                case 11:
                    return '商家同意售后申请';
                case 12:
                    return '买家已退货，待商家确认收货';
                case 13:
                    return '等待商家发货';
                case 14:
                    return '商家已发货';
                case 15:
                    return '换货待买家签收';
                case -1:
                    return '拒绝售后申请';
                case -2:
                    return '用户撤销申请';
                case -3:
                    return '商家拒绝收货';
                default:
                    return '';
            }
        },
        filterreson (val) {
            if(val.length < 7) return val;
            return val.slice(0,7) + '...';
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
        },

        /**
         * @description 查看详情
         */
        checkDetail (row) {
            this.$router.push({
                name: 'goodAfterDetail',
                query: {
                    no: row.apply_no
                }
            });
        },

        /**
         * @description 查看图片
         * @param   {String}    images    单图预览
         * @param   {Array}     images     多图预览
         */
        fnShowPreview(images) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },
    }
};
</script>

<style lang="less" scoped>
.tableProtection {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    .tableWrap {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px #EBEEF5 solid;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
        color: #999999;
    }

    .orderSelfList {
        width: 100%;
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        // nav
        .order_header {
            width: 100%;
            height: 44px;
            background: #F2F2F2;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
            .order_nav {
                width: auto;
                height: 44px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                .order_title {
                    color: #333;
                    font-size: 14px;
                    font-weight: 500;
                    box-sizing: border-box;
                    white-space: nowrap;
                    // border-left: 1px red solid;
                }
            }
        }
        // table
        .order_self {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
            // border: 1px red solid;
            &::-webkit-scrollbar {
                width: 3px;
                height: 3px;
            }
            .order_wrap {
                flex: 1;
                width: 100%;
                .order_list {
                    background: #FBFBFB;
                    border-radius: 2px;
                    border: 1px #EEEEEE solid;
                    border-bottom: none;
                    margin-top: 13px;
                    // 订单信息
                    .order_data {
                        width: calc(100% - 48px);
                        height: 44px;
                        margin-left: 24px;
                        margin-right: 24px;
                        box-sizing: border-box;
                        border-bottom: 1px #EEEEEE solid;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .order_info {
                            display: flex;
                            align-items: center;
                            .order_category {
                                width: 64px;
                                height: 20px;
                                text-align: center;
                                line-height: 20px;
                                white-space: nowrap;
                                overflow: hidden;
                                color: #F2F2F2;
                                border-radius: 2px;
                                background: #FF8E39;
                                font-size: 12px;
                                margin-right: 12px;
                            }
                            .order_no {
                                color: #333;
                                font-size: 12px;
                            }
                            .order_time {
                                color: #333;
                                font-size: 12px;
                                margin-left: 32px;
                            }
                        }
                        .nav-right {
                            display: flex;
                            align-items: center;
                            .order_detail {
                                width: 68px;
                                height: 26px;
                                cursor: pointer;
                                text-align: center;
                                line-height: 26px;
                                border-radius: 13px;
                                color: #333;
                                font-weight: 500;
                                font-size: 12px;
                                border: 1px #D7D7D7 solid;
                                // margin-right: 12px;
                            }
                            .border {
                                border: 1px #20A0FF solid;
                                color: #20A0FF;
                            }
                        }
                    }

                    //备注
                    .order_remark {
                        width: calc(100% - 48px);
                        height: 44px;
                        margin-left: 24px;
                        margin-right: 24px;
                        box-sizing: border-box;
                        border-top: 1px #EEEEEE solid;
                        display: flex;
                        align-items: center;
                        color: #333;
                        font-size: 12px;
                        font-weight: 500;
                        &>p {
                            color: #333;
                            font-size: 12px;
                            font-weight: 400;
                            margin-left: 5px;
                        }
                    }

                    //内容
                    .order_content {
                        display: flex;
                        align-items: center;
                        height: 100%;
                        .order_view {
                            margin: 16px 0;
                            display: flex;
                            align-items: center;
                            height: 100px;
                            box-sizing: border-box;
                            padding-left: 40px;
                            border-right: 1px #EEEEEE solid;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            color: #333333;
                            font-weight: 500;
                            flex: 1;
                            padding: 0 40px;
                            box-sizing: border-box;
                            min-width: 141px;
                            .order_cloum {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                .order_cloum_name {
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 120px;
                                }
                                .order_cloum_phone {
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    margin-top: 10px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 120px;
                                }
                                .order_money {
                                    color: #EE4E59;
                                    font-size: 14px;
                                    font-weight: 500;
                                }
                                .order_freight {
                                    color: #333333;
                                    font-size: 14px;
                                    margin-top: 10px;
                                }
                                .order_cloumn_button {
                                    width: 100px;
                                    height: 30px;
                                    color: #ffffff;
                                    text-align: center;
                                    line-height: 30px;
                                    font-size: 12px;
                                    margin-top: 12px;
                                    cursor: pointer;
                                    background: #20A0FF;
                                    border-radius: 15px;
                                }
                            }
                            .order_cover {
                                width: 100px;
                                height: 100px;
                                margin-right: 10px;
                            }
                            .order_product {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                .order_title {
                                    width: 198px;
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    line-height: 20px;
                                    overflow : hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    margin-bottom: 19px;
                                    white-space: normal;
                                }
                                .order_spec {
                                    height: 16px;
                                    width: 198px;
                                    line-height: 16px;
                                    color: #666;
                                    font-size: 12px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                        .order_side {
                            display: flex;
                            flex-direction: column;
                            flex: 1;
                            align-items: center;
                            border-right: 1px #EEEEEE solid;
                            border-bottom: 1px #EEEEEE solid;
                            height: 100%;
                            justify-content: center;
                            // padding: 0 40px;
                            .order_side_info_fatch {
                                width: 100%;
                                box-sizing: border-box;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                            }
                            .order_side_bottom {
                                border-bottom: 1px #EEEEEE solid;
                                .order_side_name {
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    width: 150px;
                                    line-height: 22px;
                                    text-align: center;
                                    overflow: hidden;
                                }
                                .order_side_phone {
                                    color: #333;
                                    font-size: 14px;
                                    font-weight: 500;
                                    margin-top: 10px;
                                }
                            }
                            .order_side_name {
                                color: #333;
                                font-size: 14px;
                                width: 150px;
                                line-height: 22px;
                                text-align: center;
                                overflow: hidden;
                            }
                            .order_side_phone {
                                color: #333;
                                font-size: 14px;
                                margin-top: 5px;
                            }
                            .order_side_info {
                                width: 100%;
                                display: flex;
                                height: 132px;
                                align-items: center;
                                justify-content: center;
                                box-sizing: border-box;
                                font-weight: 400;
                                .order_cover {
                                    width: 100px;
                                    height: 100px;
                                    margin-right: 10px;
                                }
                                .order_product {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    .order_title {
                                        width: 222px;
                                        color: #333;
                                        font-size: 14px;
                                        font-weight: 500;
                                        line-height: 20px;
                                        overflow : hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                        margin-bottom: 19px;
                                        white-space: normal;
                                        padding-right: 24px;
                                    }
                                    .order_spec {
                                        height: 16px;
                                        width: 222px;
                                        line-height: 16px;
                                        color: #666;
                                        font-size: 12px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        padding-right: 24px;
                                    }
                                }
                            }
                            .order_cloum {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                .order_cloumn_button {
                                    width: 100px;
                                    height: 30px;
                                    color: #ffffff;
                                    text-align: center;
                                    line-height: 30px;
                                    font-size: 12px;
                                    margin-top: 12px;
                                    cursor: pointer;
                                    background: #20A0FF;
                                    border-radius: 15px;
                                }
                            }
                            .order_side_info_fatch:last-child .order_side_info:last-child {
                                border-bottom: none;
                            }
                            .order_side_bottom:last-child {
                                border-bottom: none;
                            }
                        }
                        .no-padding {
                            padding: 0;
                        }
                    }
                }
            }
        }
    }
    // 同意退款
    .agreeMod {
        display: flex;
        flex-direction: column;
        .mod-list {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            &-title {
                width: 68px;
                color: #666;
                font-size: 14px;
            }
            &-content {
                width: 444px;
                color: #333;
            }
        }
    }
}
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
</style>

<style lang="less">
.tableProtection {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 64px;
        padding-right: 64px;
        padding-bottom: 0px;
    }
}
.el-textarea__inner {
    resize: none;
}
</style>
